<template>
  <div class="container">
    <el-card class="box-card">
      <div class="tryTyping">试题录入</div>
      <el-form
        ref="ruleForm"
        :model="ruleFormList"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 学科 -->
        <el-form-item label="学科 ： " prop="subjectID">
          <el-select
            placeholder="请选择"
            style="width: 28%"
            v-model="ruleFormList.subjectID"
            @change="changeDiscipline"
          >
            <el-option
              v-for="item in subjectNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 目录 -->
        <el-form-item label="目录 ： " prop="catalogID">
          <el-select placeholder="请选择" style="width: 28%" v-model="ruleFormList.catalogID">
            <el-option
              v-for="item in disciplineList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 企业 -->
        <el-form-item label="企业 ： " prop="enterpriseID">
          <el-select placeholder="请选择" style="width: 28%" v-model="ruleFormList.enterpriseID">
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :label="item.shortName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 城市 -->
        <el-form-item label="城市 ： " required style="width: 35.2%">
          <el-col :span="11">
            <el-form-item prop="province" style="margin-right: 4%">
              <el-select
                placeholder="请选择城市"
                style="width: 100%"
                v-model="ruleFormList.province"
                @change="changeCity"
              >
                <el-option v-for="item in provincesList" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 地区 -->
          <el-col :span="11">
            <el-form-item style="margin-left: 4%" prop="city">
              <el-select style="width: 100%" placeholder="请选择地区" v-model="ruleFormList.city">
                <el-option v-for="item in citylist" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>

        <!-- 方向 -->
        <el-form-item label="方向 ： " prop="direction">
          <el-select
            placeholder="请选择"
            style="width: 28%"
            v-model="ruleFormList.direction"
            @change="changeDirection"
          >
            <el-option v-for="item in directionList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 题型 -->
        <el-form-item label="题型 ：" prop="questionType">
          <el-radio-group v-model="ruleFormList.questionType" @change="simpleRadio">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 难度 -->
        <el-form-item label="难度 ：" prop="difficulty">
          <el-radio-group v-model="ruleFormList.difficulty" @change="theTopicDryRadio">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 题干 富文本编辑器 -->
        <el-form-item label="题干 ：" prop="question" ref="questionRef">
          <quill-editor
            v-model="ruleFormList.question"
            @change="changeQuillQuestion"
            @blur="changeQuillQuestion"
          >
          </quill-editor>
        </el-form-item>

        <!-- 选项 上传图片 配合 单选（按钮不能点击） 多选（点击按钮能增加上传图片） 简答（上传图片消失） 按钮 -->
        <el-form-item label="选择 ：" v-if="ruleFormList.questionType === '1'">
          <div class="radioChoose" v-for="item in ruleFormList.options" :key="item.code">
            <el-radio :label="item.code" v-model="radioCode">{{ item.code }}：</el-radio>
            <el-input style="width: 15%" v-model="item.title"></el-input>
            <el-upload
              action="#"
              class="avatar-uploader inline-block"
              :show-file-list="false"
              v-model="item.img"
            >
              <img v-if="item.img" :src="item.img" class="avatar" />
              <div class="clickUpload" v-else>
                点击上传
                <i class="el-icon-circle-close"></i>
              </div>
            </el-upload>
          </div>
          <el-button type="danger" disabled>+增加选项与答案</el-button>
        </el-form-item>

        <!-- 多选 -->
        <el-form-item label="选择 ：" v-if="ruleFormList.questionType === '2'">
          <div class="radioChoose" v-for="item in ruleFormList.options" :key="item.code">
            <el-checkbox
              :label="item.code"
              name="type"
              v-model="item.isRight"
              :true-label="1"
              :false-label="0"
              >{{ item.code }}：</el-checkbox
            >
            <el-input style="width: 15%" v-model="item.title"></el-input>
            <el-upload
              action="#"
              class="avatar-uploader inline-block"
              :show-file-list="false"
              v-model="item.img"
            >
              <img v-if="item.img" :src="item.img" class="avatar" />
              <div class="clickUpload" v-else>
                点击上传
                <i class="el-icon-circle-close"></i>
              </div>
            </el-upload>
          </div>
          <el-button type="danger" :disabled="disabled" @click="addOptions"
            >+增加选项与答案</el-button
          >
        </el-form-item>

        <!-- 解析视频 -->
        <el-form-item label="解析视频 ： " style="width: 35%">
          <el-input placeholder="请输入视频的URL"></el-input>
        </el-form-item>

        <!-- 答案解析 -->
        <el-form-item label="答案解析 ：" prop="answer" ref="questionForm">
          <quill-editor
            v-model="ruleFormList.answer"
            @change="changeQuillAnswer"
            @blur="changeQuillAnswer"
          >
          </quill-editor>
        </el-form-item>

        <!-- 题目备注 -->
        <el-form-item label="题目备注 ：">
          <el-input
            style="width: 25%"
            type="textarea"
            :rows="2"
            :autosize="{ minRows: 4, maxRows: 10 }"
            placeholder="请输入内容"
            v-model="ruleFormList.remarks"
          >
          </el-input>
        </el-form-item>

        <!-- 试题标签 -->
        <el-form-item label="试题标签 ： ">
          <el-select
            v-model="tagsArr"
            multiple
            filterable
            placeholder="请选择试题标签"
            style="width: 25%"
            allow-create
          >
            <el-option v-for="item in tagsArr" :key="item" :label="item" :value="item"> </el-option>
          </el-select>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="ConfirmSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simples as simpleDiscipline } from '@/api/hmmm/directorys.js'
import { list } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction } from '@/api/hmmm/constants.js'
import { add, update as updateAPI, detail } from '@/api/hmmm/questions.js'
export default {
  data() {
    return {
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      params: {
        subjectName: ''
      },
      enterprise: {
        page: 1,
        pagesize: 10
      },
      subjectNameList: [], // 学科列表
      disciplineList: [], // 目录列表
      enterpriseList: [], // 城市列表
      provincesList: [], // 城市列表
      citylist: [], // 地区列表
      directionList: [], // 方向
      showAndHide: true, // 单选框默认显示四个
      multshowAndHide: false, // 多选框不显示
      disabled: false, // 多选框中的按钮开启
      radioCode: '', // 单选
      tagsArr: [],
      // 获取到的所有数据
      ruleFormList: {
        id: '',
        number: '',
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        options: [
          // 选项
          {
            id: '',
            code: 'A', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确答案
          },
          {
            id: '',
            code: 'B', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确答案
          },
          {
            id: '',
            code: 'C', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确答案
          },
          {
            id: '',
            code: 'D', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确答案
          }
        ],
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      rules: {
        subjectID: [{ required: true, message: '学科必选！', trigger: ['blur', 'change'] }],
        catalogID: [{ required: true, message: '目录必选！', trigger: ['blur', 'change'] }],
        enterpriseID: [{ required: true, message: '企业必选！', trigger: ['blur', 'change'] }],
        province: [{ required: true, message: '城市必选！', trigger: 'change' }],
        city: [{ required: true, message: '区县必选！', trigger: 'change' }],
        direction: [{ required: true, message: '方向必选！', trigger: ['blur', 'change'] }],
        questionType: [{ required: true, message: '题型必选！', trigger: ['blur', 'change'] }],
        difficulty: [{ required: true, message: '难度必选！', trigger: ['blur', 'change'] }],
        question: [{ required: true, message: '题干必填！', trigger: ['blur', 'change'] }],
        answer: [{ required: true, message: '选择必选！', trigger: ['blur', 'change'] }]
      }
    }
  },
  // 方法
  methods: {
    // 获取学科列表
    async getDisciplineList() {
      const res = await simple()
      // console.log(res)
      this.subjectNameList = res.data
    },
    // 点击科学列表选项后 获取目录列表
    async changeDiscipline(id) {
      // console.log(id)
      const res = await simpleDiscipline({ subjectID: id })
      this.disciplineList = res.data
      // console.log(res)
    },
    // 获取企业名称
    async getEnterpriseList() {
      const { data: res } = await list(this.requestParameters)
      this.enterpriseList = res.items
    },
    // 获取城市信息
    getCityList() {
      this.provincesList = provinces()
    },
    // 选择区县
    changeCity(pname) {
      this.ruleFormList.city = ''
      this.citylist = citys(pname)
    },
    // 选择方向
    getDirectionList() {
      this.directionList = direction
    },
    // 选择方向赋值
    changeDirection(val) {
      this.ruleFormList.direction = val
    },
    // 点击题型单选
    simpleRadio(value) {
      // console.log(value)
      if (value === '1') {
        this.showAndHide = true
        this.multshowAndHide = false
      } else if (value === '2') {
        this.multshowAndHide = true
        this.showAndHide = false
        this.disabled = false
      } else {
        this.multshowAndHide = false
        this.showAndHide = false
      }
    },
    // 点击难度单选
    theTopicDryRadio(value) {
      this.ruleFormList.difficulty = value
    },
    // 题干验证富文本框
    changeQuillQuestion() {
      if (this.ruleFormList.question.trim() === '') {
        this.$refs.ruleForm.validateField('question')
      } else {
        this.$refs.questionRef.clearValidate() // clearValidate()取消验证方法
      }
    },
    // 点击增加多选框
    addOptions() {
      const newObj = {
        code: String.fromCharCode(65 + this.ruleFormList.options.length), // 代码
        title: '', // 标题
        img: '', // 图片URL
        isRight: false // 是否正确答案
      }
      this.ruleFormList.options.push(newObj)
    },

    // 答案解析验证富文本框
    changeQuillAnswer() {
      if (this.ruleFormList.answer.trim() === '') {
        this.$refs.ruleForm.validateField('answer')
      } else {
        this.$refs.questionForm.clearValidate() // clearValidate()取消验证方法
      }
    },
    // 接收跳转id
    async modifyID() {
      if (!this.$route.query.id) return
      this.ruleFormList.id = this.$route.query.id
      const res = await detail(this.ruleFormList)
      this.ruleFormList = res.data
      this.tagsArr = Array(res.data.tags)
      res.data.options.forEach(item => {
        if (item.isRight===1) {
          this.radioCode = item.code
        }
      })
    },
    // 点击提交
    ConfirmSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.ruleFormList.tags = String(this.tagsArr)
          if (this.$route.query.id) {
            await updateAPI(this.ruleFormList)
          } else {
            await add(this.ruleFormList)
          }
          this.$message.success(`${this.$route.query.id ? '试题修改成功' : '试题录入成功'}`)
          this.$router.push('/questions/list')
        }
      })
    }
  },
  // 生命周期函数
  mounted() {
    this.getDisciplineList()
    this.getEnterpriseList()
    this.getCityList()
    this.getDirectionList()
    this.modifyID()
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 10px 7px;
  .tryTyping {
    margin-bottom: 40px;
  }
  /deep/ .ql-editor {
    height: 200px;
  }
  .clickUpload {
    position: relative;
    // display: block;
    width: 90px;
    height: 50px;
    line-height: 50px;
    border: 1px dashed #b5b4b4;
  }
  .inline-block {
    display: inline-block;
    margin-left: 10px;
  }

  .radioChoose {
    margin-bottom: 20px;
    .el-radio {
      margin-right: 0;
    }
    i {
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transform: translate(50%, -50%);
      transform: translate(50%, -50%);
      background: #fff;
      font-size: 18px;
      color: #999;
    }
  }
}
</style>
